<template>
	<div class="base-radarChart" :id="uuid"></div>
</template>
<script>
	import echarts from 'echarts'
	import uuidv1 from 'uuid/v1'

	export default {
		data() {
			return {
				myRadarChart: {}, //生成的图表实例
				uuid: '', //唯一id
				titleBoolean: true, //是否显示title
			}
		},
		props: {
			// String,Array,Number,Boolean
			title: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: '#000'
			},
			titleFontSize: {
				type: Number,
				default: 18
			},
			titlePadding: {
				type: Array,
				default() {
					return [10,0,0,10]
				}
			},
			trigger: { //触发类型，'item'图形触发，'axis'坐标轴触发，'none'什么都不触发
            	type: String,
            	default: 'item'
            },
			isShowLegend: {
				type: Boolean,
				default: false
			},
			legendData: {
				type: Array,
				default() {
					return []
				}
			},
			legendBottom: {
				type: Number,
				default: 40
			},
			legendFontSize: {
				type: Number,
				default: 17
			},
			radius: {
				type: String,
				default: '50%'
			},
			radiusCenter: {
				type: Array,
				default() {
					return ['50%','50%']
				}
			},
			textColor: {
				type: String,
				default: '#777'
			},
			textBgColor: {
				type: String,
				default: '#e1f3d8'
			},
			textPadding: {
				type: Array,
				default() {
					return [5,10,5,10]
				}
			},
			radarFontSize: {
				type: Number,
				default: 12
			},
			indicatorData: {
				type: Array,
				default() {
					return [
						{name: '状态1', max: 100},
						{name: '状态2', max: 100},
						{name: '状态3', max: 100},
						{name: '状态4', max: 100},
						{name: '状态5', max: 100},
						{name: '状态6', max: 100},
					]
				}
			},
			seriesName: {
				type: String,
				default: ''
			},
			seriesValue: {
				type: Array,
				default() {
					return [[40,50,60,70,80,90]]
				}
			},
			seriesLineWidth: {
				type: Number,
				default: 2
			},
			seriesLineColor: {
				type: String,
				default: 'rgba(0,228,255,.5)'
			},
			symbolColor: {
				type: String,
				default: 'rgba(0,228,255)'
			},
			areaColor: {
				type: String,
				default: 'rgba(0,228,255,.5)'
			},
		},
		computed: {
			isShowtitle() {
				if(this.title) {
					return true
				} else {
					return false
				}
				
			}
		},
		created() {
			this.uuid = uuidv1()
		},
		mounted() {
			this.initChart()
		},
		methods: {
			//刷新图表
			refreshChart() {
				setTimeout(() => {
					this.myRadarChart.resize()
				},10)
			},
			//生成雷达图
			initChart() {
				this.myRadarChart = echarts.init(document.getElementById(this.uuid))
				this.setOption()
				if(this.fn) {
					this.myRadarChart.on('click',this.fn)
				}
			},
			//初始化雷达图数据
			setOption() {
				this.myRadarChart.setOption({
					title: {
			    		show: this.isShowtitle,
			    		text: this.title,
			    		textStyle: {
			    			color: this.titleColor,
			    			fontSize: this.titleFontSize,
			    		},
			    		padding: this.titlePadding 
			    	},
			    	tooltip: {
			    		padding: 20,
				        backgroundColor: '#222',
				        borderColor: '#777',
				        borderWidth: 1,
			    		//触发类型，'item'图形触发，'axis'坐标轴触发，'none'什么都不触发
			    		trigger: this.trigger,
			    	},
			        legend: {
			        	show: this.isShowLegend,
			            data: this.legendData,
			            bottom: this.legendBottom,
			            textStyle: {
			            	color: '#000',
			            	fontSize: this.legendFontSize
			            },
			        },
					radar: {
						radius: this.radius,
						center:  this.radiusCenter,
				        // shape: 'circle',
				        name: {
				            textStyle: {
				                color: this.textColor, //六角文字颜色
				                backgroundColor: this.textBgColor, //六角文字背景色
				                padding: this.textPadding, //文字内边距
				                fontSize: this.radarFontSize
				           }
				        },
				        indicator: this.indicatorData,
				    },
			        series: [
			        	{
			        		name: this.seriesName,
				        	type: 'radar',
				        	data: this.seriesValue,
				        	lineStyle: { //连接线
				        		width: this.seriesLineWidth,
				        		color: this.seriesLineColor,
				        	},
				        	itemStyle: { //连接点
				        		color: this.symbolColor
				        	},
				        	areaStyle: { //区域填充
				        		color: this.areaColor
				        	},
				    	}
				    ]
				},true)
			},
			//清除实例
			disposeChart() {
				this.myRadarChart.dispose()
				console.log('雷达图清除成功')
			}
		},
		watch: {
			isShowtitle: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			title: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			titleColor: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			titleFontSize: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			titlePadding: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			trigger: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			isShowLegend: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendData: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendBottom: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendFontSize: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			gridTop: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			gridBottom: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			gridLeft: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			gridRight: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			radarFontSize: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			indicatorData: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			seriesName: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			seriesValue: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			seriesLineWidth: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			seriesLineColor: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
		},
	}
</script>
<style>
	.base-radarChart {
		width: 100%;
		height: 100%;
	}
</style>